<template>
  <div>
    <div class="tow_engine_box">
      <div class="center">
        <div class="tow_engine_header">
          <div>基于人机融合的财报分析双引擎</div>
          <div>智能双引擎 财务分析反粉饰</div>
        </div>
        <div class="tow_engine_center">
          <div class="tow_engine_center_l" @mouseenter="rightMoveInit" @mouseleave="rightMoveInit">
            <div class="tow_engine_center_l_title magictime" :class="leftMove? 'vanishOut': 'vanishIn'">
                专家规则引擎（人）
            </div>
            <div  style="height: 100%;"  :class="['magictime', leftMove ? 'slideLeftRetourn' : 'slideLeft', ] " alt="">
               <div class="tow_engine_center_I_left"> 
                
                  <div class="dec_box">
                      <div class="dec_box_title">人工智能引擎（机）</div>
                      <div class="dec_box_dec">
                        <span class="pointer"></span><span> 通过机器学习分析近30万份财务报表，并建立分析预测模型</span>
                      </div>
                      <div class="dec_box_dec">
                        <span class="pointer"></span><span>提供分层次机器分析结果，即包括财务粉饰程度描述，还有财务健康风险等级划分</span>
                      </div>
                      <div class="dec_box_dec">
                        <span class="pointer"></span><span> 系统自动生成审计小结，高度总结和浓缩审计小结，高度总结和浓缩审计要点及后续稽查方向</span>
                      </div>
                  </div>
                </div>
            </div>
          </div>
          <div class="tow_engine_center_r" @mouseenter="leftMoveInint" @mouseleave="leftMoveInint">
              <div class="tow_engine_center_r_title magictime"  :class="rightMove? 'vanishOut': 'vanishIn'">
                人工智能引擎（机）
            </div>
             <div  style="height: 100%;"  :class="['magictime',
               rightMove ? 'slideRightRetourn' : 'slideRight',
               ] " >
              <div :class="['tow_engine_center_A_right '] "  >
              
                <div class="dec_box">
                    <div class="dec_box_title" style="text-indent: 1.9rem;"> 专家规则引擎（人）</div>
                    <div class="dec_box_dec" >
                      <span class="pointer" style="left: 1.54rem;"></span><span style="padding-right: 0.8rem;padding-left: 1.8rem;">结合国内顶级财经院校教授和著名会计事务所合伙人的研究和实践</span>
                    </div>
                    <div class="dec_box_dec">
                      <span class="pointer" style="left: 1.54rem;"></span><span style="padding-right: 0.8rem;padding-left: 1.8rem;"> 基于国际财务舞弊审计准则及国内财务审计原则，总结了五大审计入口和19种舞弊手法</span>
                    </div>
                    <div class="dec_box_dec" >
                      <span class="pointer" style="left: 1.54rem;"></span ><span style="padding-right: 0.8rem;padding-left: 1.8rem;">利用行业和财务附注等表外大数据，实现交叉验证和分析</span>
                    </div>
                </div>
              </div>
             </div>
          </div>
          <div class="tow_engine_center_c">
            <div class="tow_engine_center_c_title">
              智能双引擎
            </div>
            
          </div>
          <div>

          </div>
            <!-- <img src="/static/img/AI.png">
            <div class="tow_engine_center_I" @mouseenter="leftMoveInint"></div>
            <div class="tow_engine_center_A" @mouseenter="rightMoveInit"></div>-->
           
           
        </div>
      
      </div>
    </div>
    <div style="background:rgba(249,249,249,1);height: 1.56rem">
        <div class="tow_engine_end MA">
         <div class="mouse mouse_hover" @click="$store.commit('jumpURL', '立即试用云产品')">立即试用云产品</div>
          <div  class="mouse mouse_hover" @click="$store.commit('jumpURL', 'API接入')">API接入</div>
          <div  class="mouse mouse_hover" @click="$store.commit('jumpURL', '本地部署方案')">本地部署方案</div>
        </div>
    </div>
    <div>
      <div class="three_news center">
      <div class="three_news_title">重构财务分析的三大创新</div>
      <div class="three_news_center" @mousemove="three_box_mouse_enter" @mouseenter="three_box_mouse_enter" @mouseleave="startRound">
        <div class="three_news_center_left">
          <div class="three_news_center_left_menu">
            <div v-for="( item, index ) in decArr" :class="['three_news_center_left_item', isActive == index ? 'active' : '']" :key="item.cn" @mouseenter="three_mouse_enter(index)">
              <div class="three_news_center_left_item_cn">{{item.cn}}</div>
                <div class="three_news_center_left_item_en" :title="item.en">{{item.en}}</div>
            </div>
  
          </div>
        </div>
        <div class="three_news_center_right_box" :class="(isActive == 0)&&'three_news_center_right_box_active'">
          <div class="three_news_center_right">
            <div class="three_news_center_right_son">
              <img src="/static/img/banner_bg.jpg" alt srcset />
            </div>
            <div class="three_news_center_right__text">
              <div class="three_news_center_right_title">通过四维度反欺诈分析和相互交叉验证，发现财务和运营数据粉饰</div>
              <div class="three_news_center_right_dev">
                <div>专家规划分析</div>
                <div>行业数据对标</div>
                <div>机器学习反欺诈</div>
                <div>第四报表</div>
              </div>
            
            </div>
          </div>
        </div>
        <div class="three_news_center_right_box" :class="(isActive == 1)&&'three_news_center_right_box_active'">
          <div class="three_news_center_right">
            <div class="three_news_center_right_son">
              <img src="/static/img/banner_bg2.png" alt srcset />
            </div>
            <div class="three_news_center_right__text">
              <div class="three_news_center_right_title">将分析报表缩短10倍以上，分析深度提高5倍以上</div>
              <div class="three_news_center_right_dev">
                <div>自动导入</div>
                <div>反粉饰和风险分析双引擎</div>
                <div>结果秒级输出</div>
        
              </div>
         
            </div>
          </div>
        </div>
        <div class="three_news_center_right_box" :class="(isActive == 2)&& 'three_news_center_right_box_active'">
          <div class="three_news_center_right">
            <div class="three_news_center_right_son">
              <img src="/static/img/banner_bg3.png" alt srcset />
            </div>
            <div class="three_news_center_right__text">
              <div class="three_news_center_right_title">通过非财务数据构建企业第四表，突破传统财务分析局限</div>
              <div class="three_news_center_right_dev">
                <div>运营数据：用户、产品、渠道等</div>
                <div>供应链数据：库存、物流等</div>
                <div>中观数据：行业风险、行业运营指标等</div>
                <div>其他：企业经营者信用画像等</div>
              </div>
            
            </div>
          </div>
        </div>
      </div>
     
    </div>
      <div style="background:rgba(249,249,249,1);height: 1.56rem">
        <div class="tow_engine_end MA">
          <div  class="mouse mouse_hover"  @click="$store.commit('jumpURL', '立即试用云产品')">立即试用云产品</div>
          <div  class="mouse mouse_hover" @click="$store.commit('jumpURL', 'API接入')">API接入</div>
          <div  class="mouse mouse_hover" @click="$store.commit('jumpURL', '本地部署方案')">本地部署方案</div>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "productCenterArea",
  dec: "产品中心区域",
  data() {
    return {
      rightMove: false,
      leftMove: false,
      isStop: false,
      isActive: 0,
      decArr: [
        {
          cn: '前置智能反欺诈',
          en: 'Front Smart Anti-Fraud'
        },
        {
          cn: '分析过程自动化',
          en: 'Analysis process automation'
        },
        {
          cn: '集合非财务数据',
          en: 'Collect non-financial data'
        },
      ],
      timer: null
    }
  },
  mounted() {
    this.round()
  },
  methods: {
    startRound () {
      
      
      if(this.timer) clearTimeout(this.timer)
      setTimeout(this.round.bind(this), 1000);
    },
    round () {
      var isActive = this.isActive
      if(isActive<2){
        isActive++
      }else{
        isActive = 0
      }
      this.isActive = isActive
     this.timer = setTimeout(this.round.bind(this), 3000);
  
    },
    three_box_mouse_enter () {
     
      
      this.timer && clearTimeout(this.timer)
    },
    rightMoveInit () {
 
      
      this.rightMove =  !this.rightMove
 

      
    },

    leftMoveInint () {
   
      this.leftMove = !this.leftMove
  
    },
    three_mouse_enter (index) {
      this.isActive = index
    }
  },
};
</script>

<style lang="less">
.dec_box{
  overflow: hidden;
  .dec_box_title{
    margin: 0.51rem auto;
    font-weight:bold;
    color:rgba(255,255,255,1);
     font-size:0.30rem;
     text-indent:  1.4rem;
     
  }
  .dec_box_dec{
   
    font-size:0.16rem;
    font-weight:500;
    color:rgba(255,255,255,1);
    position: relative;
    letter-spacing:1px;
    margin: 0.2rem;
    overflow: hidden;
    .pointer{
      position: absolute;
      width: 0.12rem;
      height: 0.12rem;
      background: #fff;
      left: 1.04rem;
    
      top: 0.06rem;
    
      border-radius: 50%;
    }
    >span:nth-child(2){

      float: left;
      padding-right: 1.2rem;
      padding-left: 1.4rem;
    }
  }
}
.center {
  margin: 0 auto;
  width: 12rem;
}
.tow_engine_box {
  // height: 7.81rem;
  padding-top: 0.79rem;
  // padding-bottom: 0.45rem;
 
}
.tow_engine_header div {
  text-align: center;

}
.tow_engine_header div:nth-child(1) {
  font-size: 0.41rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(52, 53, 63, 1);
}
.tow_engine_header div:nth-child(2) {
  font-size: 0.26rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(106, 107, 117, 1);
}
.tow_engine_center {
  width: 100%;

  margin-top: 0.35rem;
  height: 4.22rem;
  overflow: hidden;
  position: relative;
  .tow_engine_center_l{
    position: absolute;
    left: 0;
    top: 0;
    width: 54%;
    height: 100%;
    background: url('/static/img/A.png') no-repeat;
    background-size: 100% 100%;
    .tow_engine_center_l_title{
            font-size:0.34rem;
        
            font-weight:bold;
            color:rgba(255,255,255,1);
            position: absolute;
            top: 50%;
            left: 0.89rem;
            transform: translateY(-50%);
        
         }
          .tow_engine_center_I_left{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
              left:-9%;
             
              top: 0;
              transform: skewX(-14deg);
             background:rgba(4,53,116,0.9);
              >.dec_box{
                  position: absolute;
                  left: 0;
                  top: 0;
                  z-index: 10;
                  width: 100%;
                  height: 100%;
               
                  transform: skewX(14deg);
                }
          }
    
  }
  .tow_engine_center_r{
    position: absolute;
    right: 0;
    top: 0;
    width: 54%;
    height: 100%;
    background: url('/static/img/I.png') no-repeat;
    background-size: 100% 100%;
    .tow_engine_center_A_right {
          transform: skewX(-14deg);
         background: rgba(4, 53, 116, 0.9);
           right:-9%;
           position: absolute;
           width: 100%;
           height: 100%;;
           >.dec_box{
              transform: skewX(14deg);
           }
    }
         .tow_engine_center_r_title{
            font-size:0.34rem;
        
            font-weight:bold;
            color:rgba(255,255,255,1);
            position: absolute;
            top: 50%;
            right: 0.89rem;
            transform: translateY(-50%);
        
         }
  }
  .tow_engine_center_c{
    position: absolute;
    width: 2.83rem;
    height: 2.83rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('/static/img/tow_engine_center_c.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .tow_engine_center_c_title{
       font-size:0.34rem;
        
            font-weight:bold;
            color:rgba(255,255,255,1);
           
            
    }
    
  }

}

.tow_engine_center .tow_engine_center_I{
  position: absolute;
  width: 50%;
  z-index: 1;
  left: 0;
  height: 100%;
  opacity: 0.5;
  

}
.tow_engine_center .tow_engine_center_A{
  position: absolute;
  width: 50%;
  z-index: 1;
  right: 0;
  height: 100%;
  opacity: 0.5;

}

.tow_engine_center .tow_engine_center_A_right_move{
  right: 0;
}

.tow_engine_center  .tow_engine_center_I_left_move{
  left: 0;
}
.tow_engine_end {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 0.65rem;
  height: 100%;
}
.tow_engine_end > div {
  width: 2.58rem;
  height: 0.87rem;
  border-radius: 0.06rem;
  border: 0.01rem solid rgba(106, 107, 117, 1);
  color: rgba(106, 107, 117, 1);
  font-size: 0.24rem;
  text-align: center;
  line-height: 0.87rem;
}
.three_news {
  // height: 8.41rem;
  padding-bottom: 0.20rem
}
.three_news .three_news_title {
  text-align: center;
  margin: 0.56rem 0;
  font-size: 0.41rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(52, 53, 63, 1);
}
.three_news .three_news_center {
  height: 4.21rem;
  position: relative;
}
.three_news .three_news_center .three_news_center_left {
  position: absolute;
  top: 50%;
  height: 3.35rem;
  width: 100%;
  margin-top: -1.625rem;
  box-shadow: 0px 0px 0.18rem 0px rgba(204, 204, 204, 0.5);
  left: 0;
}
.three_news .three_news_center .three_news_center_right {
  width: 9.52rem;

  height: 100%;

  z-index: 1;
  right: -0.38rem;
  top: 0;
  position: absolute;
  transform: skew(-10deg);
}
.three_news .three_news_center .three_news_center_right_box {
  width: 9.52rem;
  height: 100%;
  overflow: hidden;
  right: 0;
  top: 0;
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
}
.three_news .three_news_center .three_news_center_right_box_active{
  opacity:1;
}
.three_news .three_news_center .three_news_center_right_son {
  width: 9.52rem;
  height: 100%;
  overflow: hidden;
  right: 0;
  top: 0;
  position: absolute;
}
.three_news .three_news_center .three_news_center_right_son img {
  transform: skew(10deg);
  width: 104%;
  height: 100%;
  display: block;
  float: right;
}
.three_news
  .three_news_center
  .three_news_center_right
  > .three_news_center_right__text {
  margin: 0.85rem 0 0.35rem 1.46rem;
  transform: skew(10deg);
}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu {
  width: 2.34rem;
  height: 100%;

}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu {
  width: 2.34rem;
  height: 100%;
  padding-top: 0.26rem;
}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu
  .three_news_center_left_item:nth-child(1) {

}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu
  .three_news_center_left_item {
    

  font-size: 0.2rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(52, 53, 63, 1);
  border-right: 0.02rem solid rgba(245, 245, 245, 1);
  padding:0.23rem 0.29rem;
  // padding-left: 0.29rem;
  // padding-top: 0.23rem;
  transition: color 1s, border-color 1s;
  box-sizing: content-box;
  
;
}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu
  .three_news_center_left_item_en {
  font-size: 1px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(52, 53, 63, 1);
  transition: color 1s;
   white-space: nowrap;  

 text-overflow:ellipsis; 

 overflow:hidden;
 
}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu
  .three_news_center_left_item.active {
  color: #16a2f9;
  border-right: 0.02rem solid #16a2f9;
   white-space: nowrap;  

 text-overflow:ellipsis; 

 overflow:hidden;
}
.three_news
  .three_news_center
  .three_news_center_left
  .three_news_center_left_menu
  .three_news_center_left_item.active
  .three_news_center_left_item_en {
  color: #16a2f9;
}

.three_news
  .three_news_center
  .three_news_center_right
  > div
  .three_news_center_right_title {
  font-size: 0.24rem;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.three_news
  .three_news_center
  .three_news_center_right
  .three_news_center_right_dev {
  overflow: hidden;
  margin-top: 0.39rem;
}
.three_news
  .three_news_center
  .three_news_center_right
  .three_news_center_right_dev
  > div {
  width: 4rem;
  margin-bottom: 0.27rem;
  font-size: 0.2rem;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  float: left;
}
.three_news
  .three_news_center
  .three_news_center_right
  .three_news_center_right_detail {
  width: 1.63rem;
  height: 0.48rem;
  border: 0.01rem solid rgba(255, 255, 255, 1);
  font-size: 0.16rem;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 0.48rem;
  margin-top: 0.33rem;
}
.three_news_center_end {
  display: flex;
  justify-content: space-around;
  margin-top: 0.65rem;
}
.three_news_center_end > div {
  width: 2.58rem;
  height: 0.87rem;
  border-radius: 0.06rem;
  border: 0.01rem solid rgba(106, 107, 117, 1);
  color: rgba(106, 107, 117, 1);
  font-size: 0.24rem;
  text-align: center;
  line-height: 0.87rem;
}
</style>